<template>
  <el-container class="nopadding content">
    <el-aside class="carts" width="350px">
      <LeftCart v-bind:dataSource="dataSource" class="leftCart"></LeftCart>
    </el-aside>
    <el-main class="right-c">
      <RightContent class="rightContent"></RightContent>
    </el-main>
  </el-container>
</template>

<script type="text/ecmascript-6">
import LeftCart from './leftCart/LeftCart'
import RightContent from './rightContent/RightContent'
export default {
  data () {
    return {
      dataSource: {}
    }
  },
  components: {
    LeftCart,
    RightContent
  },
  created () {
    this.postData()
  },
  methods: {
    postData () {
      this.$fetch('/example')
        .then((response) => {
          console.log(response)
          this.dataSource = Object.assign({}, this.dataSource, response)
          console.log('测试数据：', this.dataSource)
        })
    }
  }
}
</script>

<style lang="less">
@import '../../../assets/css/color';
  .el-main {
    padding: 0;
  }
  .content {
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 100px;
    right: 0;
  }
  .carts, .right-c {
    background-color: @colorBlackHui;
    padding: 10px;
  }
  .right-c {
    padding-left: 0;
  }
  .leftCart, .rightContent {
    position: relative;
    height: 100%;
  }
</style>
